﻿// 页面加载完成后执行
$(window).on("load", function () {
    $(".loading").fadeOut(); // 隐藏加载动画
});

// DOM 加载完成后执行
$(function () {
    // 初始化所有功能模块
    time();           // 时间显示
    model();          // Sovit2D 场景
    echarts_2();      // ECharts 图表 2
    echarts_3();      // ECharts 图表 3
    echarts_4();      // ECharts 图表 4
    recycle();        // 滚动表格
    echarts_pie();    // Pie 图表（修复后）
});

// 实时时间显示
function time() {
    let t = null;
    function updateTime() {
        clearTimeout(t);
        const dt = new Date();
        const y = dt.getFullYear();
        const mt = dt.getMonth() + 1;
        const day = dt.getDate();
        const h = dt.getHours();
        const m = dt.getMinutes();
        const s = dt.getSeconds();
        $("#showTime").html(`${y}/${mt}/${day} ${h}:${m}:${s}`);
        t = setTimeout(updateTime, 1000);
    }
    updateTime(); // 立即调用一次
}

// Sovit2D 场景初始化
function model() {
    $(document).ready(function () {
        const sceneMain = new Sovit2DPaser.Scene2dMain({
            apiurl: 'https://admin.sovitjs.com/restapi',
            publishType: 1,
        });
        sceneMain.init2d("sovit2d_1", {
            pageId: "3854697515467145218"
        }, function (reData) {
            document.title = "奇精机械有限公司";
            console.log('模型加载完成');
        });
    });
}

// 滚动表格初始化
function recycle() {
    window.addEventListener('DOMContentLoaded', () => {
        const marquee = document.querySelector('.marquee');
        if (!marquee) return;
        const rows = marquee.querySelectorAll('.row');
        marquee.innerHTML += marquee.innerHTML;
        const rowHeight = 48;
        const originalRowCount = rows.length;
        const totalHeight = rowHeight * originalRowCount * 2;
        const speed = 50; // 滚动速度（px/s）
        const duration = totalHeight / speed;
        marquee.style.animationDuration = `${duration}s`;
    });
}

// ECharts 图表 2 - 柱状图
function echarts_2() {
    const myChart = echarts.init(document.getElementById('echart6'));

    // 替换为污水处理环节名称
    const titlename = [
        "格栅过滤",
        "沉砂池",
        "初沉池",
        "生物池",
        "二沉池",
        "混凝沉淀池",
        "砂滤池",
        "消毒池",
        "污泥浓缩池",
        "污泥脱水机",
        "中水回用单元",
        "排放监测口",
        "达标排放口"
    ];

    // 示例处理能力数据（单位：万吨/日）
    const data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182];

    const option = {
        grid: { left: 0, top: 0, right: 0, bottom: 0, containLabel: true },
        xAxis: { show: false },
        yAxis: [{
            show: true,
            data: titlename,
            inverse: true,
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { textStyle: { color: '#fff' } },
        }],
        series: [{
            name: '处理能力',
            type: 'bar',
            yAxisIndex: 0,
            data: data,
            barWidth: 15,
            itemStyle: {
                color: '#1089E7',
                barBorderRadius: 50
            },
            label: {
                show: true,
                position: 'right',
                formatter: '{c} 万吨/日',
                textStyle: { color: 'rgba(255,255,255,.7)' }
            }
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", () => myChart.resize());
}


// ECharts 图表 3 - 折线图
function echarts_3() {
    const myChart = echarts.init(document.getElementById('echart3'));
    const option = {
        tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } },
        grid: { left: 10, top: 20, right: 30, bottom: 10, containLabel: true },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 14 } },
            axisLine: { lineStyle: { color: 'rgba(255,255,255,.2)' } },
            data: [ '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月']
        }],
        yAxis: [{
            type: 'value',
            axisTick: { show: false },
            splitNumber: 4,
            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
            axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 16 } },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dotted' } }
        }],
        series: [{
            name: '污染率',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: { color: 'rgba(31, 174, 234, 1)', width: 2 },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: 'rgba(31, 174, 234, 0.4)'
                }, {
                    offset: 0.8, color: 'rgba(31, 174, 234, 0.1)'
                }]),
                shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            itemStyle: { color: '#1f7eea', borderColor: 'rgba(31, 174, 234, .1)', borderWidth: 5 },
            data: [3, 6, 3, 6, 3, 9, 3, 12, 6, 8, 3, 5, 9, 3]
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", () => myChart.resize());
}

// ECharts 图表 4 - 双柱状图
function echarts_4() {
    const myChart = echarts.init(document.getElementById('echart4'));
    const option = {

        grid: { left: 0, top: 50, right: 0, bottom: 10, containLabel: true },
        legend: {
            top: 20,
            textStyle: { color: "#fff" },
            itemWidth: 10,
            itemHeight: 10
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: function (params) {
                let result = params.map(item => `${item.seriesName}: ${item.data} m³/h`).join('<br/>');
                return `${params[0].name}<br/>${result}`;
            }
        },
        xAxis: {
            type: 'category',
            data: ["西区进水口", "北区进水口", "南区进水口"],
            axisTick: { show: true },
            axisLine: {
                show: true,
                lineStyle: { color: 'rgba(255,255,255,.1)', width: 1, type: 'dotted' }
            },
            axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
        },
        yAxis: {
            name: '处理效率（m³/h）',
            nameTextStyle: { color: '#fff', fontSize: 12, padding: [0, 0, 0, 10] },
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: { color: 'rgba(255,255,255,.1)', width: 1, type: 'dotted' }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: { fontSize: 12, color: '#fff' },
                margin: 40
            },
            axisLine: { show: false }
        },
        series: [{
            name: '原方案',
            type: 'bar',
            data: [3, 7, 4],
            barWidth: 15,
            itemStyle: { color: "#446ACF", barBorderRadius: 50 }
        }, {
            name: '建议方案',
            type: 'bar',
            data: [6, 2, 5],
            barWidth: 15,
            itemStyle: { color: "#4fb69d", barBorderRadius: 50 }
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", () => myChart.resize());
}


// ECharts 图表 5 - 环形图
function echarts_5() {
    const myChart = echarts.init(document.getElementById('echart5'));
    const option = {
        legend: {
            orient: 'vertical',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: { color: 'rgba(255,255,255,.5)' },
            top: '20%',
            right: 30,
            data: ['已入驻', '已出售', '已租赁', '闲置房产']
        },
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" },
        series: [{
            type: 'pie',
            radius: [20, 70],
            center: ["35%", "50%"],
            roseType: 'area',
            data: [
                { value: 300, name: '已入驻' },
                { value: 200, name: '已出售' },
                { value: 205, name: '已租赁' },
                { value: 180, name: '闲置房产' }
            ],
            label: {
                normal: {
                    formatter: function (param) {
                        return param.name + ':\n' + param.value + '\n';
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 5,
                    length2: 15,
                    lineStyle: { width: 1 }
                }
            },
            itemStyle: {
                normal: { shadowBlur: 30, shadowColor: 'rgba(0, 0, 0, 0.4)' }
            }
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", () => myChart.resize());
}

// Pie 图表（修复后）✅
function echarts_pie() {
    // 确保 DOM 加载完成后再初始化
    $(document).ready(function () {
        const myechart = echarts.init(document.getElementById('pie'));
        const option = {
            tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
            series: [{
                name: '地区',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '50%'],
                roseType: 'radius',
                data: [
                    { value: 40, name: 'COD' },
                    { value: 30, name: '氨氮' },
                    { value: 25, name: '总磷' },
                    { value: 20, name: '总氮' },
                    { value: 35, name: 'SS' },
                    { value: 15, name: '石油类' },
                    { value: 10, name: '重金属' },
                    { value: 15, name: '动植物油' }
                ],
                label: { fontSize: 10 },
                labelLine: { length: 8, length2: 10 }
            }],
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        };
        myechart.setOption(option);
        window.addEventListener("resize", () => myechart.resize());
    });
}

// ==UserScript==
// @name         深度扫描并阻止特定 data:image/png 图片
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const TARGET_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAZAAAAEECAYAAAAGSGKZAAAAAXNSR";
    const REMOVE_TEXT = "已移除元素: <DIV> (匹配特征码)";
    const LOG_STYLE = "color: #f44336; font-weight: bold;";

    console.log("%c[深度扫描器] 开始监控 base64 PNG 图片...", LOG_STYLE);

    // 核心扫描函数
    function scanForBase64PNG() {
        const startTime = performance.now();
        let matchCount = 0;
        let removalCount = 0;

        // 高效选择器：只扫描可能包含背景图片的元素
        const elements = document.querySelectorAll(
            'div, span, a, li, td, th, section, article, header, footer'
        );

        elements.forEach(el => {
            // 检查内联样式
            if (el.style.backgroundImage.includes('data:image/png') &&
                el.style.backgroundImage.includes(TARGET_BASE64)) {
                matchCount++;
                el.style.backgroundImage = 'none';
                removalCount++;
                return;
            }

            // 检查计算样式
            const bgImage = getComputedStyle(el).backgroundImage;
            if (bgImage.includes('data:image/png') &&
                bgImage.includes(TARGET_BASE64)) {
                matchCount++;
                removalCount++;
                el.style.backgroundImage = 'none';
            }
        });

        // 性能监控
        const duration = (performance.now() - startTime).toFixed(2);
        const logMsg = `扫描完成! 发现 ${matchCount} 个匹配，已移除 ${removalCount} 个元素 (耗时 ${duration}ms)`;

        if (matchCount > 0) {
            console.log(`%c[深度扫描器] ${logMsg}`, LOG_STYLE);
        }
    }

    // 监控DOM变化的优化回调
    function handleMutations(mutations) {
        const startTime = performance.now();
        let found = false;

        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (node.nodeType !== 1) continue;

                // 检查内联样式
                if (node.style && node.style.backgroundImage.includes('data:image/png') &&
                    node.style.backgroundImage.includes(TARGET_BASE64)) {
                    found = true;
                    node.style.backgroundImage = 'none';
                }

                // 检查子元素
                const matches = node.querySelectorAll('div');
                for (const el of matches) {
                    const bgImage = getComputedStyle(el).backgroundImage;
                    if (bgImage.includes('data:image/png') &&
                        bgImage.includes(TARGET_BASE64)) {
                        found = true;
                        el.style.backgroundImage = 'none';
                    }
                }
            }
        }

        if (found) {
            const duration = (performance.now() - startTime).toFixed(2);
            console.log(`%c[深度扫描器] 动态内容扫描完成 (耗时 ${duration}ms)`, LOG_STYLE);
        }
    }

    // 初始化MutationObserver
    const observer = new MutationObserver(handleMutations);
    observer.observe(document, {
        childList: true,
        subtree: true,
        attributes: false,
        characterData: false
    });

    // 页面加载后执行初始扫描
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(scanForBase64PNG, 500); // 稍等页面布局完成
        });
    } else {
        setTimeout(scanForBase64PNG, 1000);
    }

    // 在卸载时清理
    window.addEventListener('unload', () => {
        observer.disconnect();
    });
})();